<template>
  <div style="height: 100%" v-loading="loading">
    <van-nav-bar
      title="车牌号清单信息"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <div style="width: 100%;overflow: scroll;height: 100px;">
      <el-input v-model="searchQuery" type="number" size="medium" placeholder="请输入" ></el-input>
      <van-button @click="filteredData"
                  style="
                    border: #3793fb solid 1px;
                    border-radius: 2px;
                    background-color: #3793fb;
                    line-height: var(--footer-height);
                  "
                  type="primary" block>查询</van-button>
    </div>
    <div style="width: 100%;overflow: scroll;height: 350px;" >
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
      >

        <el-table-column align="center" prop="carno" label="车牌号清单" style="width: 100%" >
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePage"
          :current-page="currentPage"
          :page-size="pageSize"
          small
          layout="total, prev, pager, next"
          :total="size">    <!--//这是显示总共有多少数据，-->
      </el-pagination>
    </div>

    <van-button
      @click="onChoose"
      style="
        position: fixed;
        bottom: 0px;
        border: #3793fb solid 1px;
        border-radius: 2px;
        background-color: #3793fb;
        line-height: var(--footer-height);
      "
      type="primary"
      block
      >选择</van-button
    >
  </div>
</template>

<script>
import 'vant/lib/index.css'

export default {
  data() {
    return {
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      tableDataOld: [],
      loading: false,
      size:0
    };
  },
  mounted() {
    // this.getProductInboundInfoList();
    this.queryCarNoLists();
  },
  created() {
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
    },
    handleCurrentChangePage: function(currentPage){
      this.currentPage = currentPage;
    },
    async queryCarNoLists() {
      const {data: res} = await this.$http.post(
          "/CarNoListAll",
          {}
      );
      this.tableData = res;
      this.tableDataOld = res;
      this.size = res.length
    },
    //返回
    goBack() {
      this.$router.push({
        path: '/ToneSlotsRecycle'
      });
    },
    setCurrent(row) {
      this.$refs.tableData.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    onChoose() {
      let codeInfo = this.currentRow.carno;
      this.$router.push({
        path: "/ToneSlotsRecycle",
        query: { isReturn : true , codeInfo : codeInfo , tableData : this.$route.query.tableData },
      });
    },
    filteredData() {
      const searchQuery = this.searchQuery && this.searchQuery.toLowerCase();
      if(searchQuery){
        this.tableData = this.tableDataOld.filter(row => {
          return Object.keys(row).some(key => {
            return String(row[key]).toLowerCase().includes(searchQuery);
          });
        });
      }else{
        this.queryCarNoLists();
      }
    },
  },
};
</script>

<style>
</style>
